<template>
  <view class="">

    <u-calendar :z-index="99999" v-model="dateshow" mode="date" @change="dateChange"></u-calendar>

    <u-modal v-model="showXZ" :show-confirm-button="false" :show-title="false">
      <view class="my-modal">
        <u-section title="筛选查询" :right="false"></u-section>

        <view class="flex date">
          <u-button v-for="(obj, i) in dateTypeList" :key="obj" :type="searchData.btType === i ? 'primary' : 'default'"
            class="bt" @click.native="monthDay(i)">{{ obj }}</u-button>
        </view>


        <u-form>
          <u-form-item right-icon="calendar" class="my-input ">
            <u-input @click="choseDate(0)" v-model="searchData.beginDate" type="text" :border="false" input-align="center"
              disabled placeholder="请选择开始时间" />
          </u-form-item>
          <u-form-item right-icon="calendar" class="my-input u-m-t-20">
            <u-input @click="choseDate(1)" v-model="searchData.endDate" type="text" :border="false" input-align="center"
              disabled placeholder="请选择结束时间" />
          </u-form-item>
        </u-form>

        <view class="flex date my-submit">
          <u-button type="default" class="bt" @click.native="reset">重置</u-button>
          <u-button type="primary" class="bt" @click.native="submit">确定</u-button>
        </view>

      </view>
    </u-modal>


  </view>
</template>

<script>


export default {
  data() {
    return {
      searchData: {
        btType: '',
        beginDate: '',
        endDate: ''
      },
      dateshow: false,
      showXZ: false,
      dateType: 0,
      dateTypeList: ['当日', '当月']
    }
  },
  created() {
    this.searchData.beginDate = this.$u.date()
    this.searchData.endDate = this.$u.date()
  },
  methods: {
    choseDate(val) {
      this.dateType = val
      this.dateshow = true
    },

    monthDay(val) {
      const date = this.$u.date()
      this.searchData.btType = val
      if (val === 0) {
        this.searchData.beginDate = date
        this.searchData.endDate = date
      } else {
        this.searchData.beginDate = this.$timeScopeThisMonth()[0].substr(0, 10)
        this.searchData.endDate = date
      }
    },
    dateChange(obj) {
      this.searchData.btType=''
      this.searchData[['beginDate', 'endDate'][this.dateType]] = obj.result
    },


    reset() {
      this.searchData.btType = 0
      this.searchData.beginDate = this.$u.date()
      this.searchData.endDate = this.$u.date()
    },
    submit() {
      if (this.searchData.beginDate > this.searchData.endDate) {
        this.$u.toast("开始时间不能大于结束时间")
        return
      }
      this.showXZ = false
      this.$emit('submitDate', this.searchData)
    }
  }
}
</script>
<style lang="scss" scoped>
.date {
  margin: 1em 0;

  .bt {
    border-radius: 50px;
    flex-basis: 45%;

    &:after {
      border-radius: 50px;
    }
  }



}


/deep/ .my-modal {
  padding: 1em;
  background: rgb(247, 247, 250);

  .u-border-bottom:after {
    border-bottom-width: 0
  }

  .u-input {
    text-align: left !important;
  }

  .u-icon {
    color: rgb(61, 95, 255);
  }


  .my-input {
    background: rgb(255, 255, 255);
    padding: 0 1em;
    border-radius:
      22.5px;
  }

  .my-submit {
    margin-top: 8em;
  }
}
</style>
